<template>
  <div class="school">
    <h2>学校名称 {{ name }}</h2>
    <h2>学校地址 {{ address }}</h2>
    <button @click="sendStudentName">点我给Student组件传递name值</button>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "尚硅谷",
      address: "北京",
    };
  },
  mounted() {
    // console.log("school",this.$bus); //在当前vc中找$bus会顺着原型链到Vue.prototype中找
    // 为挂载在Vue原型上的 $bus(vm) 绑定自定义事件
    this.$bus.$on("hello", (data) => {
      console.log("我是School组件，我收到了数据", data);
    });
  },
  methods:{
    sendStudentName(){
      // 触发$bus
      this.$bus.$emit("studentGet",this.name)
    }
  },
  // 在组件销毁前解绑自定义事件
  beforeDestroy() {
    this.$bus.$off("hello");
  },
  // 注意：组件销毁时会自动解绑自身的自定义事件,但全局事件总线自定义事件是在$bus(vm)组件上绑定的,
  // 所以需要手动解绑,只有当$bus被销毁时身上所有的自定义事件才能解绑
};
</script>

<style>
.school {
  background-color: skyblue;
  padding: 5px;
}
</style>
